<template>
  <div class="container" style="width: 1000px">

    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <div class="title">客户信息录入</div>
      </div></el-col>
    </el-row>

    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">
          <el-page-header  icon="el-icon-d-arrow-left" title="返回" @click="goBack"> </el-page-header>
       </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple-light">
          <div>| 笔迹分析</div>
        </div>
      </el-col>
    </el-row>

    <div class="content">

      <div class="information">

        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple-dark">
              <el-button
                  class="my_button"
                  type="text"
                  icon="el-icon-message"
                  size="medium"
              >
                <div class="first-title">客户信息</div>
              </el-button>
            </div>
          </el-col>


          <el-col :span="12">

            <el-upload
                class="upload-demo"
                action="/api/export/importCustomer"
                :on-success="handleSuccess"
                multiple
                :limit="1"
                :file-list="fileList"
            >
              <el-button size="small" type="primary">导入excel文件</el-button>
            </el-upload>
          </el-col>
        </el-row>
        <hr/>

        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-button
                  class="my_button"
                  type="text"
                  icon="el-icon-user">
                <div class="second-title">客户个人信息</div>
              </el-button>
            </div>
          </el-col>
        </el-row>

          <!--客户信息-->
        <el-form label-width="100px"
                 :model="customer"
                 status-icon
                 :rules="rules"
        >
          <el-row>
          <el-col :span="12">
            <div class="customer-form">
              <el-form-item
                  label="姓名"
                  prop="name"
              >
                <el-col :span="8">
                  <el-input v-model="customer.name"/>
                </el-col>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="customer-form">
              <el-form-item label="籍贯" prop="nativePlace">
                <el-col :span="8">
                  <el-input v-model="customer.nativePlace"/>
                </el-col>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

          <el-row>
            <el-col :span="12">
              <div class="customer-form">
                <el-form-item
                    label="性别"
                    prop="gender"
                >
                  <el-col :span="8">
                    <el-radio-group v-model="customer.gender">
                      <el-radio :label="0">男</el-radio>
                      <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="customer-form">
                <el-form-item label="现居" prop="address">
                  <el-col :span="8">
                    <el-input v-model="customer.address"/>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <div class="customer-form">
                <el-form-item
                    label="出生"
                    prop="birthday"
                >
                  <div class="block">
                    <el-date-picker v-model="customer.birthday" type="date" placeholder="选择你的生日">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="customer-form">
                <el-form-item
                    label="职业"
                    prop="professional"
                >
                  <el-col :span="8">
                    <el-input v-model="customer.professional"/>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <div class="customer-form">
                <el-form-item
                    label="电话"
                    prop="phoneNum"
                >
                  <el-col :span="8">
                    <el-input v-model="customer.phoneNum"/>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="customer-form">
                <el-form-item label="兴趣" prop="interest">
                  <el-col :span="8">
                    <el-input v-model="customer.interest"/>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

        </el-form>



        <!-- 家庭成员信息-->
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-button
                  class="my_button"
                  type="text"
                  icon="el-icon-user">
                <div class="second-title">客户家庭情况</div>
              </el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <el-button
                type="text"
                @click="moreVisible = true"
            >录入家庭成员信息</el-button>
          </el-col>
        </el-row>




        <el-table
            :data="familyNumberList"
            :header-cell-style="headClass"
            :cell-style="rowClass"
            style="width: 100%">
          <el-table-column prop="id" label="序号">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="成员姓名"/>
          <el-table-column prop="gender" label="性别">
            <template #default="scope">
              {{ scope.row.gender===0?'男':'女'}}
            </template>
          </el-table-column>
          <el-table-column prop="relationship" label="与客户关系"/>
          <el-table-column prop="phoneNum" label="联系电话" />
        </el-table>


        <div class="first-title">*病史</div>
          <el-form-item
              prop="medicalHistory"
          >
            <el-input
                v-model="customer.medicalHistory"
                :rows="4"
                type="textarea"
                placeholder="请输入..."
            />
          </el-form-item>
      </div>


      <div class="description">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-button
                  class="my_button"
                  type="text"
                  icon="el-icon-edit">
                <div class="first-title">客户描述</div>
              </el-button>
            </div>
          </el-col>
        </el-row>

        <el-input
            v-model="customer.description"
            :rows="4"
            type="textarea"
            placeholder="请输入..."
        />

        <!--单选框-->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <div>
                <el-radio-group v-model="customer.sort">
                  <el-radio :label="15">重点客户</el-radio>
                  <el-radio :label="10">中等客户</el-radio>
                  <el-radio :label="5">普通客户</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-col>
        </el-row>



      </div>


      <el-row>
        <el-col :span="6">
          <div class="footer-button">
            <el-button
                type="primary"
                @click="resetData"
            >
              重置
            </el-button>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="footer-button">
            <el-button
                type="primary"
                @click="selectGroupVisible=true"
            >
              保存
            </el-button>
          </div>
        </el-col>
      </el-row>

    </div>

    <el-dialog title="录入家庭成员信息" v-model="moreVisible" width="30%">
      <el-form :model="familyNumber">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="familyNumber.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio v-model="familyNumber.gender" label="0">男</el-radio>
          <el-radio v-model="familyNumber.gender" label="1">女</el-radio>
        </el-form-item>
        <el-form-item label="与客户关系" :label-width="formLabelWidth">
          <el-input v-model="familyNumber.relationship" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="familyNumber.phoneNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="moreVisible = false">取消</el-button>
        <el-button type="primary" @click="insertFamilyNumber"
        >增加</el-button
        >
      </span>
      </template>
    </el-dialog>

    <!-- 编辑更多框 -->
    <el-dialog title="添加到分组" v-model="selectGroupVisible" width="30%">
      <el-table
          :data="groupList"
          @selection-change="handleGroupSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column property="groupName" label="分组名称" width="150"></el-table-column>
        <el-table-column property="count" label="人数" width="200"></el-table-column>
      </el-table>

      <el-button
          type="text"
          icon="el-icon-plus"
          style="margin: 0px 10px"
          @click="addGroup"
      >
      </el-button>
      <el-input
          type="text"
          placeholder="新建分组"
          v-model="group.groupName"
          style="width: 200px"
          maxlength="10"
          show-word-limit
      >
      </el-input>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="selectGroupVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCustomer">
          确 定
        </el-button>
      </span>
      </template>
    </el-dialog>


    <el-dialog
        v-model="confimVisible"
        title="提示"
        width="30%"
    >
      <span>是否立即分析</span>
      <template #footer>
      <span class="dialog-footer">
        <router-link :to="{name:'CustomerManager'}">
           <el-button style="margin-right: 20px">取消</el-button>
        </router-link>
        <router-link :to="{name:'Psy', params:{customerId: this.customerId}}">
            <el-button type="primary"
          >确定</el-button
          >
        </router-link>
      </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
import customer from "@/api/customer/customer";
import familyNumber from "@/api/familyNumber/familyNumber";
import group from "@/api/group/group";

export default  {
  name: "AddCustomer",

  setup() {
    const state = reactive({
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
    })
  },
  data() {
    const validatePhoneNum = (rule, value, callback) => {
      let reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      if (!reg.test(value)) {
        callback(new Error('手机号码不符合要求'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur'}
        ],
        birthday: [
          { required: true, message: '请选择出生日期', trigger: 'blur'}
        ],
        phoneNum: [
          { required: true, message: '请输入电话', trigger: 'blur'},
          { validator: validatePhoneNum, trigger: "blur"}
        ],
        professional: [
          { required: true, message: '请输入职业', trigger: 'blur'},
        ],
        medicalHistory: [
          { required: true, message: '请输入病史', trigger: 'blur'}
        ]
      },
      fileList: [],
      moreVisible: false,
      selectGroupVisible: false,
      confimVisible: false,
      groupList: null,
      customer: {
        name: null,
        nativePlace: null,
        address: null,
        gender: null,
        birthday: null,
        professional: null,
        phoneNum: null,
        interest: null,
        medicalHistory: null,
        description: null,
        sort: null,
        userId: 3376322891317,
        groupId: null,
      },
      familyNumber:{
        name: null,
        gender: null,
        relationship: null,
        phoneNum: null,
      },
      familyNumberList:[
      ],
      // 新建分组名称
      group: {
        groupName: null,
        userId: 3376322891317,
      },
      customerId: null,
      userId: null,
      groupId: null,
      formLabelWidth: '120px',
    }
  },
  created() {
    let user = JSON.parse(localStorage.getItem("SESSION_KEY_USER"));
    this.userId = user.id;
    this.group.userId = user.id;
    this.getGroupInfo()
  },
  methods: {
    handleSuccess(response, file, fileList) {
      if(response.success === true) {
        this.$message({
          type: 'success',
          message: '导入成功',
        })
      } else {
        this.$message({
          type: 'error',
          message: '导入失败',
        })
      }

      this.$router.replace("/customer/show");
    },
    // 表头居中显示
    headClass() {
      return "text-align:center"
    },
    rowClass() {
      return "text-align:center"
    },
    goBack() {
      this.$router.replace("/customer/list")
    },
    resetData() {
      this.customer = {};
      this.familyNumberList = [];
    },
    initGroup() {
      this.getGroupInfo()
    },
    getGroupInfo() {
      group.getGroupInfo(this.userId)
          .then((response) => {
            this.groupList = response.data.list;
          }).catch(error => {
        console.log(error);
        this.$message({
          type: "error"
        })
      })
    },
    handleGroupSelectionChange(val) {
      this.multipleGroupSelection = val
      this.customer.groupId = this.multipleGroupSelection[0].id
    },
    // 新建分组
    addGroup() {
      group.addGroup(this.group)
          .then((response) => {
            this.initGroup()
            // 重置新建分组输入框
            this.group.groupName = null
            return response
          }).catch((response) => {
        console.log("error:" + response.message);
      })
    },
    // 添加家庭成员信息
    insertFamilyNumber() {
      this.moreVisible = false;
      this.familyNumberList.push(this.familyNumber);
      this.familyNumber = {}
    },
    // 增加客户信息
    addCustomer() {
      // 将消息框关闭
      this.selectGroupVisible = false

      customer.addCustomer(this.customer)
        .then((response) => {
          this.customerId = response.data.item;
          if(this.familyNumberList.length != 0) {
            familyNumber.addFamilyNumbers(this.familyNumberList, this.customerId)
                .then((response) => {
                 console.log(response.message)
                })
          }
          this.confimVisible = true
        }).catch((response) => {
        console.log("error:" + response.message);
      })
    }
  },
  // 跳转到管理页面
  gotoManage() {
    this.$router.push("/customer/manage");
  }
}
</script>

<style scoped>


.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.container {
  margin: 20px 400px;
}
.el-input {
  width: 180px;
}
#input-textarea {
  width: 300px;
}

#reset-btn {
  margin-right: 25px;
}
.important {
  color: red;
}

.content {
  border-style: outset;
}
.information {
  border-style: outset;
}
.description {
  border-style: outset;
}
.title {
  font-size: 30px;
  margin: 5px 400px;
}
.my_button {
  margin: 10px;
}
.first-title {
  font-size: 24px;
  color: black;
}
.second-title {
  font-size: 20px;
  color: red;
}

.excel {
  font-size: 12px;
  margin: 2px 400px;
}

.footer-button {
  margin: 5px 300px;
}
</style>